<header x-data="{
    sticky: false,
    stickyPositionOffset: 30,
    evaluateScrollPosition(){
        if(window.pageYOffset > this.stickyPositionOffset && !this.sticky){
            this.stickyApply();
        }

        if(window.pageYOffset < this.stickyPositionOffset && this.sticky){
            this.stickyRemove();
        }
    },
    stickyApply(){
        $el.classList.remove('absolute');
        $el.classList.add('fixed');
        $el.classList.add('-translate-y-7');

        
        setTimeout(function(){
            $el.classList.add('duration-300', 'ease-out');
        }, 20);
        setTimeout(function(){
            $el.classList.remove('-translate-y-7');
        }, 50);
        this.sticky = true;
    },
    stickyRemove(){
        setTimeout(function(){
            $el.classList.add('absolute');
            $el.classList.remove('fixed');
        //$el.classList.remove('-translate-y-64');
        }, 100);
        
        $el.classList.remove('duration-300', 'ease-out');
        this.sticky = false;
    }
}" x-init="() => {
    setTimeout(function(){
        evaluateScrollPosition();
    }, 100);

    window.addEventListener('scroll', () => {
        evaluateScrollPosition();
    })
}" x-data class="absolute z-50 w-full">
<div class="absolute left-0 z-50 w-full h-24">
<div class="relative z-40 mx-auto w-full max-w-6xl">
    <nav class="flex items-center w-full h-24 select-none" x-data="{ showMenu: false }">
        <div class="flex absolute z-40 justify-between items-start mx-auto w-full max-w-6xl font-medium md:items-center md:h-24 md:justify-between">
            <div class="flex overflow-hidden z-40 items-center space-x-0 w-auto rounded-full">
                <div class="flex relative z-30 items-center px-3 h-10 space-x-0 [&.scrolled]:bg-white [&.scrolled]:bg-white/20 border border-transparent [&.scrolled]:border-white [&.scrolled]:border-opacity-25 rounded-full">
                    <button @click="slideOverOpen=true" class="w-6 text-white focus:outline-none focus:border-0 active:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
                    </button>
                    <a href="/" class="flex flex-shrink-0 items-center py-4 pr-2 pl-1 space-x-0 w-auto font-extrabold text-white md:py-0">
                        <span class="flex flex-shrink-0 items-center space-x-1.5">
                            <img src="/assets/img/logo-white.png" alt="4-H" class="flex-shrink-0 w-8 h-8">
                            <span class="flex-shrink-0">4-H</span>
                        </span>
                    </a>
                </div>
            </div>
            <div :class="{'flex': showMenu, 'hidden md:flex': !showMenu }" class="overflow-hidden absolute left-1/2 z-50 flex-col justify-center items-center w-full h-auto text-xs font-semibold text-center text-gray-400 rounded-full backdrop-blur-sm -translate-x-1/2 md:w-auto md:h-10 md:flex-row md:items-center" x-cloak>
                <div class="relative z-50 flex-col  items-center justify-center w-full h-auto px-1 text-xs font-semibold text-center text-gray-400 bg-[#D9D9D9] [&.dark]:bg-black/40 [&.dark]:border-gray-700 [&.dark]:border-opacity-20 border-0 rounded-full border-white/20 md:border md:w-auto md:h-10 md:flex-row md:items-center">
                    <a href="/" class="inline-flex relative flex-shrink-0 items-center px-2 py-5 mx-2 w-full h-full leading-tight text-center text-white md:px-2 lg:mx-3 md:py-2 group md:w-auto md:text-center">
                        <span>Home</span>
                    </a>
                    <a href="/" class="inline-flex relative flex-shrink-0 items-center px-2 py-5 mx-2 w-full h-full leading-tight text-center text-white md:px-2 lg:mx-3 md:py-2 group md:w-auto md:text-center">
                        <span>Features</span>
                    </a>
                    <a href="/" class="inline-flex relative flex-shrink-0 items-center px-2 py-5 mx-2 w-full h-full leading-tight text-center text-white md:px-2 lg:mx-3 md:py-2 group md:w-auto md:text-center">
                        <span>Pricing</span>
                    </a>
                    <a href="/" class="inline-flex relative flex-shrink-0 items-center px-2 py-5 mx-2 w-full h-full leading-tight text-center text-white md:px-2 lg:mx-3 md:py-2 group md:w-auto md:text-center">
                        <span>Blog</span>
                    </a>
                </div>
                <div id="dimmer" class="absolute bottom-0 left-0 w-full h-0 backdrop-blur-sm bg-black/70"></div>
            </div>
            <div class="overflow-hidden absolute top-0 right-0 z-40 items-center p-3 w-full h-full text-sm bg-gray-900/50 md:w-auto md:bg-transparent md:p-0 md:flex">
                <div class="flex-col items-center w-full relative z-20 h-full pl-6 py-0 overflow-hidden bg-black/50 select-none [&.scrolled]:bg-white/20 border border-transparent [&.scrolled]:border-white [&.scrolled]:border-opacity-10 [&.scrolled]:backdrop-blur-lg rounded-full md:h-auto md:bg-transparent md:relative md:flex md:flex-row md:overflow-auto">
                    <div class="flex relative z-20 flex-col justify-end items-center pt-2 w-full h-full md:w-full md:flex-row md:py-0">
                        <a href="#_" class="py-5 mr-0 w-full text-center text-gray-200 md:py-3 md:w-auto hover:text-white md:pl-0 md:mr-3 lg:mr-5">Sign In</a>
                        <a href="#_" class="inline-flex overflow-hidden flex-shrink-0 justify-center items-center p-px w-full font-medium text-center text-white bg-gradient-to-b from-green-400 to-green-600 rounded-full whitespace-no-wrap group md:mr-1 md:w-auto md:rounded-full focus:outline-none focus:shadow-outline-gray active:bg-gray-700">
                            <span class="px-5 py-3 leading-6 bg-green-500 rounded-full transition duration-150 ease-in-out group-hover:bg-green-600 md:py-1.5">Sign Up Today</span>
                        </a>
                    </div>
                    <div id="dimmer-r" class="absolute bottom-0 left-0 w-full h-0 backdrop-blur-sm bg-black/70"></div>
                </div>
            </div>
        </div>
    </nav>
</div>
</div>
</header>